<template>
    <div :class="$route.path=='/index'?'outer':'outer-black'">
        <div class="inner">
            <div class="inner-left">
                <img src="../assets/indexImg/homeLogo.png" height="40" width="257"/>
            </div>
            <ul class="inner-right">
                <li :class="$store.state.nowPage==5?'now':'none'"><router-link to="/aboutUs" tag="span">关于我们</router-link></li>
                <li :class="$store.state.nowPage==4?'now':'none'"><router-link to="/news/newsIn" tag="span">新闻中心</router-link></li>
                <li :class="$store.state.nowPage==3?'now':'none'"><router-link to="/news/laboratoryIn" tag="span">星火实验室</router-link></li>
                <li :class="$store.state.nowPage==2?'now':'none'"><router-link to="/productPage" tag="span">产品</router-link></li>
                <li :class="$store.state.nowPage==1?'now':'none'"><router-link to="/index" tag="span">首页</router-link></li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "titleNav",
        created() {
            // console.log(this.$route.path)
        }
    }
</script>

<style scoped lang="less">
    *{
        list-style: none;
    }
    .outer {
        width: 100%;
        position: fixed;
        /*top: 20px;*/
        z-index: 5;
    }
    .outer-black {
        background-color: #000000;
        width: 100%;
        position: fixed;
        z-index: 5;
    }
    .inner {
        /*background-color: darkgray;*/
        width: 90%;
        min-width: 1200px;
        margin: auto;
        padding-top: 10px;
        height: 70px;
        overflow: hidden;
        box-sizing: border-box;
    }
    .inner-left {
        float: left;
    }
    .inner-right {
        float: right;
    }
    .inner-right {
        font-size: 14px;
        li {
            height: 40px;
            float: right;
            padding: 0px 40px;
            margin-top: 10px;
            color: white;
            transition-property: color;
            transition-duration: 0.3s;
        }
        li:hover{
            color: rgb(113, 207, 255);
            cursor: pointer;
            background: url("../assets/indexImg/nav_bg.png");
            background-repeat: no-repeat;
            background-position: 16px 15px;
        }
    }
    //当前页面的状态
    .now {
        color: rgb(113, 207, 255)!important;
        cursor: pointer;
        background: url("../assets/indexImg/nav_bg.png");
        background-repeat: no-repeat;
        background-position: 16px 15px;
    }
</style>